<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线测试神经网络垃圾分类识别接口</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<body>



<div class="container-fluid">
    <h1 class="text-center">深度学习之垃圾分类api</h1>
    <div class="row-fluid">
        <div class="span12">
            <h3>
                在线测试图片.
            </h3>
            <form>
                <div class="form-group">
                    <div class="col-sm-3 control-label">选择文件</div>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <input id='location' class="form-control" onclick="$('#i-file').click();">
                            <label class="input-group-btn">
                                <input type="button" id="i-check" value="浏览文件" class="btn btn-primary" onclick="$('#i-file').click();">
                            </label>
                        </div>
                    </div>
                    <input type="file" name="file" id='i-file'  onchange="$('#location').val($('#i-file').val());" style="display: none">
                </div>
            </form>
            <p class="text-center"><a href="#" id="submit" class="btn btn-warning" role="button">提交</a></p>
        </div>
    </div>

    <div class="col-sm-12" id="result">

    </div>


    <div class="box">
        <div class="text-sm">
            <h3>http://10.11.2.17:5000/predict</h3>
            <p>post方式访问：上传文件：file</p>
            <p>例如：file:"XXXXXXX"</p>
            <p>2019/11/3</p>
            <p>云中有鹿</p>
        </div>
    </div>




</div>


<script>
    $('#submit').click(function () {
        var formData = new FormData();
        var file = document.getElementById("i-file").files[0];
        formData.append("file", file);
        $.ajax({
            url:"/predict",
            type:"POST",
            data:formData,
            processData : false,
            contentType : false,
            dataType : 'json',
            async : false,
            success : function (result) {
                //成功后的回调事件
                console.log(result);
                var html='<div class="alert alert-success" role="alert" id="result">'+result.result+' </div>';
                $("#result").append(html);
            }
        })
    })
</script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</body>


</html>

